import React from 'react';

import styles from './index.less';
import { Calculator, History } from './components';

const TranscationProvinceCaculation = () => {
  const [historys, setHistorys] = React.useState([]);
  const collapseClick = (index) => {
    historys[index].show = !historys[index].show;
    setHistorys([...historys]);
  };

  const pushHistory = (history) => {
    let result = JSON.parse(JSON.stringify(history));
    if (history.length < 10) {
      setHistorys([result, ...historys]);
      return;
    }
    setHistorys([result, ...historys.filter((item, index) => index < 9)]);
  };
  return (
    <div className={styles.container}>
      <Calculator pushHistory={pushHistory} />
      <History historys={historys} collapseClick={collapseClick} />
    </div>
  );
};

export default TranscationProvinceCaculation;
